<template>
    <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="currentTab==='field'" size="small" label-width="90px">

          <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
            <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
          </el-form-item>

           <el-form-item v-if="configData.chartOption.isEffect!==undefined" label="轮播效果">
            <el-select v-model="configData.chartOption.isEffect" placeholder="请选择">
              <el-option
                v-for="(item,index) in swipers"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.playSpeed!==undefined" label="轮播速度">
            <el-select v-model="configData.chartOption.playSpeed" placeholder="请选择">
              <el-option
                v-for="(item,index) in speeds"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.direction!==undefined" label="轮播方向">
              <el-radio-group v-model="configData.chartOption.direction">
                <el-radio label="horizontal">横向</el-radio>
                <el-radio label="vertical">纵向</el-radio>
              </el-radio-group>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.isPagination!==undefined" label="是否关闭分页器">
                <el-switch v-model="configData.chartOption.isPagination" active-text="是(点击图片关闭)" inactive-text="否"/>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.paginationType!==undefined" label="分页样式">
            <el-select v-model="configData.chartOption.paginationType" placeholder="请选择">
              <el-option label="圆点" value="bullets"></el-option>
              <el-option label="分式" value="fraction"></el-option>
              <el-option label="进度条" value="progress"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item  label="图库">
            <el-button type="primary" @click="openGallery">图库</el-button>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
            <el-select v-model="configData.chartOption.animate" placeholder="请选择">
              <el-option
                v-for="item in animateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">
          
           <data-source-config :dataSourceType="configData.chartOption.dataSourceType" :customData="configData" :customId="configData.customId" 
            @changeSource="changeSource"  @changeData="changeData" :baseType="''"></data-source-config>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>

        </el-form>
        <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right"  :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <!-- 图库对话框 -->
    <el-dialog title="图库" :visible.sync="open" width="1000px" hight="600px" append-to-body>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="所属模板">
        <el-input
            v-model="queryParams.viewTemplate"
            placeholder="请输入所属模板"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
        />
        </el-form-item>
        
        <el-form-item label="图片分类" prop="status">
        <el-select
            v-model="queryParams.sort"
            placeholder="图片分类"
            clearable
            size="small"
            style="width: 240px"
        >
            <el-option
            v-for="item in sortOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="uploadOpenModel">上传<i class="el-icon-upload el-icon--right"></i></el-button>
            <!--
            <el-upload action="#" :show-file-list="false" :before-upload="beforeUpload" multiple>
            <el-button size="small">
              上传
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>-->
        </el-form-item>
      </el-form>

      <div style="overflow:auto; height:500px;">
        <ul :id="configData.customId+'rotationUl'"
            class="background-images-ul"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled">
            
            <li v-for="(item,index) in uploadList" :id= "configData.customId+'li'+index" :class="classList[index]==true?'active':''" @click="selectImg(index,basePath+item.imagePath)" style="overflow:hidden">
              <img :src="basePath + item.imagePath" class="border_img">
              <label :title="item.name">{{ item.name }}</label>
              <span title="删除" class="drawing-item-delete" @click.stop="deleteBorder(item.uploadId)"><i class="el-icon-delete"></i></span>
            </li>
        </ul>
        <p v-if="loading" style="text-align: center;">加载中...</p>
        <p v-if="noMore" style="text-align: center;">没有更多了</p>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRotation">确认</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改数据大屏文件上传映射对话框 -->
    <el-dialog title="上传图片" :visible.sync="uploadOpen" width="500px" append-to-body>
      <el-form ref="uploadForm" :model="uploadForm" :rules="rules"  label-width="80px">

        <el-form-item label="是否公开" prop="isOpen">
            <el-radio-group v-model="uploadForm.isOpen">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="是否模板素材" prop="isTemplate" v-if="adminRole">
            <el-radio-group v-model="uploadForm.isTemplate">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
            </el-radio-group>
        </el-form-item>
                        
        <el-form-item label="所属模板" prop="viewTemplate">
          <el-input v-model="uploadForm.viewTemplate" style="width: 360px" placeholder="请输入所属模板" />
        </el-form-item>

        <el-form-item label="图片分类" prop="sort">
            <el-select
            v-model="uploadForm.sort"
            placeholder="图片分类"
            clearable
            size="small"
            style="width: 360px"
        >
            <el-option
            v-for="item in sortOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
        </el-form-item>
        
        <el-form-item label="上传">
            <el-upload
            class="upload-demo"
            drag
            action
            :http-request="httpRequest"
            :show-file-list="false" :before-upload="beforeUpload"
            multiple>
            <i class="el-icon-upload"></i>
            </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload">提交</el-button>
        <el-button @click="cancelUpload">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="通用处理"
      v-if="dataOpen"
      :visible.sync="dataOpen"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog> 
  </div>
</template>

<script>

import {animateOptions} from '../../animate/animate'
import { listUpload, fileUpload, delUpload } from "@/api/tool/datav/fileUpload";
import Interactionwebsocket from './chartDB/Interactionwebsocket'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import DataSourceConfig from '@/views/tool/datav/components/config/DataConfig/DataSourceConfig'

export default {
  components: {
    Interactionwebsocket,
    DataEditor,
    DataSourceConfig
  },
  props: ["costomData"],
  data() {
    return {
      basePath: process.env.VUE_APP_BASE_API,
      swipers:[{label:'位移',value:'slide'},{label:'褪色',value:'fade'},{label:'轻弹',value:'flip'},{label:'立方体',value:'cube'},{label:'覆盖流',value:'coverflow'}],
      speeds:[{label:'一阶',value:'2500'},{label:'二阶',value:'5000'},{label:'三阶',value:'7500'},{label:'四阶',value:'10000'}],
      currentTab: 'field',
      configData: this.costomData,
      animateOptions,
      staticDataValue: this.costomData != null ? JSON.stringify(this.costomData.chartOption.staticDataValue) : '123',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
      open: false,
      sortOptions: [{label:'图标', value: 1}, {label:'边框', value: 2}, {label:'按钮', value: 3}],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: '1',
        sort: undefined,
        viewTemplate: undefined,
      },
      rules: {
        isOpen: [
          { required: true, message: "是否公开不能为空", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "所属分类不能为空", trigger: "blur" }
        ]
      },
      uploadList: [],
      total: -1,
      loading: false,
      uploadOpen: false,
      uploadForm: {
        isOpen:"0",
        isTemplate: "0",       
      },
      fileList: [],
      selectList: [],
      classList: [],
      adminRole: false,//管理员权限
      aceKey:Math.random(),
      dataOpen:false,
    }
  },
  //页面加载完执行
  mounted() {
    
  },
  created() {
    let roles = this.$store.getters.roles;
    let result = roles.find(ele => ele === 'admin')//判断是否包含admin权限
    if (result) {
      this.adminRole = true;
    };
  },  
  computed: {
   noMore () {
      if(this.total != -1) {
        return this.total == this.uploadList.length
      } else {
        return false;
      }
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
   watch: {
    configData: {
      deep: true,
      handler(newVal) {
        // console.log("1=>", newVal);
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = JSON.stringify(newVal.chartOption.staticDataValue);
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
      }
    }
  },
  methods: {
    changeSource(val){
      this.$set(this.configData.chartOption, 'dataSourceType', val);
    },
    changeData(val,id,type){
      if(this.configData.customId == id){
        if(type == 'static'){
          this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(val));
        }else if(type == 'url'){
          
          if(val.type == "interfaceUrl"){
            this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
          }else if(val.type == "requestParameters"){
            this.$set(this.configData.chartOption, 'requestParameters', val.arr);
          }else if(val.type == "requestMethod"){
            this.$set(this.configData.chartOption, 'requestMethod', val.arr);
          }else if(val.type == "token"){
            this.$set(this.configData.chartOption, 'token', val.arr);
          }else if(val.type == "timeout"){
            this.$set(this.configData.chartOption, 'timeout', val.arr);
          }
        }else if(type == 'database'){
          this.$set(this.configData.chartOption, 'database', val.database);
          this.$set(this.configData.chartOption, 'bi', val.bi);
        }else if(type == 'form'){
          this.$set(this.configData.chartOption, 'formSource', val);
        }else if(type == 'websocket'){
           this.$set(this.configData.chartOption, 'interfaceKey', val);
        }
      }
      
    },  
    openGallery() {
      //每次打开图库重新渲染设置已选择列表为空
      this.selectList = [];
      //设置选中列表样式为空
      this.classList = [];

      let list = JSON.parse(this.staticDataValue);
      for(let i=0;i<list.length;i++){
  
        this.selectList.push({"index":"","imagePath":list[i].value})
      
      }
      this.total = -1;
      this.uploadList = [];
      this.queryParams.pageNum = 1;
      this.open = true;
      this.load();     
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    handleQuery() {
      this.total = -1;
      this.uploadList = [];
      this.queryParams.pageNum = 1;
      this.open = true;
      this.load();
    },
    load () {
        this.loading = true;   
        listUpload(this.queryParams).then(response => {
          this.uploadList = this.uploadList.concat(response.rows);
          this.total = response.total;
          this.queryParams.pageNum++;
          this.loading = false;

          //设置回显列表已选中图片状态
          //每次比对新加载的数据
          for(let i=0;i<response.rows.length;i++){
            
            let flag = false;
            this.selectList.forEach(ele => {
               
              if(ele.imagePath == (this.basePath + response.rows[i].imagePath)){
                //已存在设置为true
                flag = true;
              }
            });
            this.classList.push(flag)

          }
      })
    },
    selectImg(index,imagePath) {
      let flag = false;
      //判断已选中元素再次选中则为取消选中
      for(let i=0;i<this.selectList.length;i++){
        if( imagePath == this.selectList[i].imagePath){
          this.selectList.splice(i,1);
          flag = true;
          document.getElementById(this.configData.customId+"li"+index).className = "";
        }
      }
      //第一次选中元素则为确认选择元素
      if(!flag){
          this.selectList.push({"index":index,"imagePath":imagePath});  
          document.getElementById(this.configData.customId+"li"+index).className = "active";
      }

    },
    //确认选择图库中的图片
    submitRotation(){
      
      let result = [];
      this.selectList.forEach(element => {
        result.push({"value": element.imagePath})
      });
      this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(JSON.stringify(result)));
      
      this.open = false;
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      }
    },
    //取消上传
    cancelUpload() {
        this.uploadOpen = false;
    },
    uploadOpenModel() {
        this.uploadOpen = true;
    },
    //自定义上传,重写文件上传方法,覆盖原有的上传方法，将上传的文件依次添加到fileList数组中
    httpRequest(option) {
        this.fileList.push(option);
        this.msgSuccess("成功上传至浏览器缓存");
    },
    submitUpload() {
       this.$refs["uploadForm"].validate(valid => {
        if (valid) {
            // 使用form表单的数据格式
          let paramsData = new FormData()
          // 将上传文件数组依次添加到参数paramsData中
          this.fileList.forEach((it, index) => {
            //paramsData.append(`files[${index}]`, it.file)
           
            paramsData.append('file', it.file); // 因为要上传多个文件，所以需要遍历一下才行
          });
          // 将表单数据添加到参数paramsData中
          paramsData.append('isOpen', this.uploadForm.isOpen)
          paramsData.append('isTemplate', this.uploadForm.isTemplate)
          paramsData.append('viewTemplate', this.uploadForm.viewTemplate)
          paramsData.append('sort', this.uploadForm.sort)
          paramsData.append('type', '1')
          // 表单数据和文件一起上传,调用后端接口
          fileUpload(paramsData).then(response => {
            //  console.log(response);
            if (response.code == 200) {
                this.uploadOpen = false;
                this.fileList = [];
                this.uploadForm.isOpen = "0";
                this.uploadForm.isTemplate = "0";
                this.uploadForm.viewTemplate = undefined;
                this.uploadForm.sort = undefined;
                this.msgSuccess("上传成功");
                //重新加载上传数据
                this.uploadList = [];
                this.queryParams.pageNum = 1;
                this.load();
            }
          });
         
         }
      });
    },
    deleteBorder(uploadId){
      this.$confirm('是否确认删除该背景框?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delUpload(uploadId).then(response => {
        if (response.code === 200) {

          this.msgSuccess("删除成功");
            //重新加载上传数据
            this.uploadList = [];
            this.queryParams.pageNum = 1;
            this.load();
        } else {
          this.msgError(response.msg);
        }
      });
        }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除操作'
        });          
      });
    },
    pageCount (totalnum, limit) {
        return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit) ? (parseInt(totalnum / limit) + 1) : (totalnum / limit))) : 0;
    },
    
    editData(){
      this.dataOpen = true;
    },
    cancelData(){
      this.dataOpen = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.dataOpen = false;
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .center-tabs .el-tabs__item {
    width: 33%;
    text-align: center;
}
.background-images-ul {
    margin-bottom: 20px;
}
.background-images-ul li {
    margin: 2px;
    display: inline-block;
    width: 200px;
    line-height: 25px;
    padding: 20px;
    border: 1px solid #e2e2e2;
    font-size: 14px;
    text-align: center;
    color: #666;
    transition: all .3s;
    -webkit-transition: all .3s;
    cursor: pointer;
    position: relative;
    &:hover {
      
      & > .drawing-item-delete{
        display: initial;
      }
    }
    & > .drawing-item-copy, & > .drawing-item-delete{
      display: none;
      position: absolute;
      top: 0px;
      right: 15px;
      width: 22px;
      height: 22px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      font-size: 12px;
      border: 1px solid;
      cursor: pointer;
      z-index: 1;
   }
    & > .drawing-item-delete{
      right: 0px;
      border-color: #F56C6C;
      color: #F56C6C;
      background: #fff;
      &:hover{
        background: #F56C6C;
        color: #fff;
      }
  }
}
.border_img {
    width: 160px;
    height: 90px;
    object-fit: contain;
}
.background-images-ul label {
    display: inline-block;
    width: 160px;
    color: #DBEEFF;
    overflow: hidden;
}
.background-images-ul label{
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.background-images-ul .active{
  border: 1px solid #19b7c7  !important;
}
</style>